<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}
			
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 1;
			}
			
			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}
			
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			
			.mui-pull-top-tips .mui-pull-loading {
				/*-webkit-backface-visibility: hidden;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;*/
				margin: 0;
			}
			
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			
			.mui-pull-top-wrapper .mui-icon.mui-reverse {
				/*-webkit-transform: rotate(180deg) translateZ(0);*/
			}
			
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			
			.mui-slider-indicator.mui-segmented-control {
				background-color: #efeff4;
			}
		</style>
		<script src="js/mui.min.js" type="text/javascript"></script>
		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
		<script type="text/javascript">
		mui.plusReady(function(){
			getGeocode();
		});
		
		
		
		var watchId;
		function geoInf(position) {
			var str = "";
			str += "地址：" + position.addresses + "\n"; //获取地址信息
			str += "坐标类型：" + position.coordsType + "\n";
			var timeflag = position.timestamp; //获取到地理位置信息的时间戳；一个毫秒数；
			str += "时间戳：" + timeflag + "\n";
			var codns = position.coords; //获取地理坐标信息；
			var lat = codns.latitude; //获取到当前位置的纬度；
			str += "纬度：" + lat + "\n";
			var longt = codns.longitude; //获取到当前位置的经度
			str += "经度：" + longt + "\n";
			var alt = codns.altitude; //获取到当前位置的海拔信息；
			str += "海拔：" + alt + "\n";
			var accu = codns.accuracy; //地理坐标信息精确度信息；
			str += "精确度：" + accu + "\n";
			var altAcc = codns.altitudeAccuracy; //获取海拔信息的精确度；
			str += "海拔精确度：" + altAcc + "\n";
			var head = codns.heading; //获取设备的移动方向；
			str += "移动方向：" + head + "\n";
			var sped = codns.speed; //获取设备的移动速度；
			str += "移动速度：" + sped;
//			alert(position);
//			alert(JSON.stringify(position));
//			alert(position.address.city);
//			outLine(str);
            document.getElementById("cityChoice").innerText=position.address.city;
            document.getElementById("cityChoice_pub").innerText=position.address.city;
		}

		function getPos() {
//			outSet("获取位置信息:");
			plus.geolocation.getCurrentPosition(geoInf, function(e) {
//				outSet("获取位置信息失败：" + e.message);
			}, {
				geocode: false
			});
		}

		function watchPos() {
			if(watchId) {
				return;
			}
			watchId = plus.geolocation.watchPosition(function(p) {
//				outSet("监听位置变化信息:");
				geoInf(p);
			}, function(e) {
//				outSet("监听位置变化信息失败：" + e.message);
			}, {
				geocode: false
			});
		}

		function clearWatch() {
			if(watchId) {
//				outSet("停止监听位置变化信息");
				plus.geolocation.clearWatch(watchId);
				watchId = null;
			}
		}
		// 通过定位模块获取位置信息
		function getGeocode() {
//			outSet("获取定位位置信息:");
			plus.geolocation.getCurrentPosition(geoInf, function(e) {
				alert("获取定位位置信息失败：" + e.message);
			}, {
				geocode: true
			});
		}
		
	</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">周边游</h1>
			<!--<a class="mui-icon mui-pull-right" id="cityChoice">sss</a>-->
		</header>
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1" data-wid="tab-top-subpage-1.html">
							推荐
						</a>
						<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
							热点
						</a>
						<!--<a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
							北京
						</a>
						<a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
							社会
						</a>
						<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							娱乐
						</a>-->
						<!--<a class="mui-control-item" href="#item6mobile" data-wid="tab-top-subpage-6.html">
							科技
						</a>-->
					</div>
				</div>
                <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
					<div class="mui-slider-group">
						<div id="item1" class="mui-slider-item mui-control-content mui-active">
							<!--城市选择   s-->
							<ul class="mui-table-view mui-table-view-chevron">
								<li class="mui-table-view-cell citys" id="citys">
									<a class="mui-navigate-right">
										<span class="mui-badge mui-badge-danger cityChoice" id="cityChoice">未定位</span> 城市选择
									</a>
								</li>
							</ul>
							<!--城市选择  e-->
							<!--周边列表   s-->
							<ul class="mui-table-view mui-grid-view findList" id="list">
								<li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="item in items">
									<a href="#" data-guid="item.guid">
										<img class="mui-media-object" :src="item.cover">
										<div class="mui-media-body">{{item.title}}</div>
										<div class="condition">
											<span class="jia">￥<i class="price">{{item.author}}</i>起</span>
											<span class="chakan">查看详情</span>
	
										</div>
									</a>
								</li>
							</ul>
	
							<!--周边列表   e-->
	
						</div>
					</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
		<script>
			mui.init({
				
			});
			mui.plusReady(function() {
//				mui.preload({
//			   		 	url:'tab-top-subpage-1.html'
//			   		 })
								   		
 
				var group = new webviewGroup(plus.webview.currentWebview().id,{
					items: [
				 
					{
						id: "tab-top-subpage-2.html",
						url: "tab-top-subpage-2.html",
						extras: {}
					}
//					,{
//						id: "tab-top-subpage-3.html",
//						url: "tab-top-subpage-3.html",
//						extras: {}
//					}, {
//						id: "tab-top-subpage-4.html",
//						url: "tab-top-subpage-4.html",
//						extras: {}
//					}, {
//						id: "tab-top-subpage-5.html",
//						url: "tab-top-subpage-5.html",
//						extras: {}
//					}
					],
					
					
					
					
					onChange: function(obj) {
						var c = document.querySelector(".mui-control-item.mui-active");
						if(c) {
							c.classList.remove("mui-active");
						}
						document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")").classList.add("mui-active");
					}
				});
				mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {
					var wid = this.getAttribute("data-wid");
					group.switchTab(wid);
				});

               //end
                 
			});
			mui.back = function() {
				var _self = plus.webview.currentWebview();
				_self.close("auto");
			}
		
//		   document.getElementById("cityChoice").addEventListener("click",function(){
//		   		mui.openWindow({
//		   			url:'indexed-list-select.html'
//		   		});
//		   	
//		   })
		   window.addEventListener('near', function(event) {
			   	mui.plusReady(function(){
//					plus.webview.currentWebview().close();
//			   		embed=plus.webview.create('tab-top-subpage-1.html', '', {top:'82px',bottom:'0px'});
//	                embed.show('slide-in-right', 300);// 在当前窗口之后显示
			   		
					alert(33333);
						var yourChoice= event.detail.choice;
						alert(yourChoice);
						document.getElementById("cityChoice").innerText=yourChoice;
						
						
						
						
						
//						
//						var parentview = plus.webview.currentWebview().children();
//							parentview.reload(true);
						
			   	})
					
					
					
				}, false);
		
		</script>
		<script type="text/javascript">
			var lastId = ''; //最新新闻的id
			var webview_detail = null; //详情页webview
			var titleNView = { //详情页原生导航配置
				backgroundColor: '#f7f7f7', //导航栏背景色
				titleText: '', //导航栏标题
				titleColor: '#000000', //文字颜色
				type: 'transparent', //透明渐变样式
				autoBackButton: true, //自动绘制返回箭头
				splitLine: { //底部分割线
					color: '#cccccc'
				}
			}
			mui.plusReady(function() {
				//预加载详情页
				webview_detail = mui.preload({
					url: 'detail.html',
					id: 'news_detail',
					styles: {
						"render": "always",
						"popGesture": "hide",
						"bounce": "vertical",
						"bounceBackground": "#efeff4",
						"titleNView": titleNView
					}
				});
			 //发现酒店的切换
			 document.getElementById("findItem2").addEventListener("tap",function(){
			 	bb();
			 	
			 	
			 	
			 	
			 	
			 	
			 	
			 	
			 	
			 	
			 	
			 	
//			 	mui.openWindow({
//			 		url:"tab-top-subpage-2.html"
//			 	})
			 })
//			 //周边游的切换
//			 document.getElementById("findItem1").addEventListener("tap",function(){
//			 	alert(333);
//			 	var content="#list";
//			    var vueT="#item1";
//			    hanshu=aa;
//			 })
			});
			//mui初始化，配置下拉刷新
			mui.init({
				pullRefresh: {
					container: "#list",
					down: {
						style: 'circle',
						offset: '0px',
						auto: true,
						callback: aa,
					
					//end
					
					}
				}
			});

			

			var news = new Vue({
				el: "#item1",
				data: {
					banner: {}, //顶部banner数据
					items: [] //列表信息流数据
				}
			});

			//点击列表，打开详情
			//TODO 后续应该封装一个v-tap指令，实现tap监听
			mui('.mui-content').on('tap', '[data-guid]', function() {
				var guid = this.getAttribute('data-guid');
				//var title = this.querySelector(".mui-ellipsis-2").innerHTML.trim();
				var author = this.querySelector(".author").innerHTML;
				var time = this.querySelector(".time").innerHTML;
				var cover = this.querySelector("img").getAttribute("src");
				open_detail(guid, title, author, time, cover);
			});

			/**
			 * 打开新闻详情
			 * 
			 * @param {String} guid 新闻ID
			 * @param {String} title  新闻标题
			 */
			function open_detail(guid, title, author, time, cover) {
				//若详情页尚未预加载完成，则延时等待再执行
				if(!webview_detail) {
					setTimeout(function() {
						open_detail(guid);
					}, 100);
				}
				//触发子窗口变更新闻详情
				mui.fire(webview_detail, 'get_detail', {
					guid: guid,
					title: title,
					author: author,
					time: time,
					cover: cover
				});

				//更改详情页原生导航条信息
				titleNView.titleText = title;
				webview_detail.setStyle({
					"titleNView": titleNView
				});
				setTimeout(function() {
					webview_detail.show("slide-in-right", 300);
				}, 150);
			}

			/**
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 * 
			 * @param {Array} items 
			 */
			function convert(items) {
				var newItems = [];
				items.forEach(function(item) {
					newItems.push({
						guid: item.post_id,
						title: item.title,
						author: item.author_name,
						cover: item.cover,
						time: dateUtils.format(item.published_at)
					});
				});
				return newItems;
			}

			/**
			 * 格式化时间的辅助类，将一个时间转换成x小时前、y天前等
			 */
			var dateUtils = {
				UNITS: {
					'年': 31557600000,
					'月': 2629800000,
					'天': 86400000,
					'小时': 3600000,
					'分钟': 60000,
					'秒': 1000
				},
				humanize: function(milliseconds) {
					var humanize = '';
					mui.each(this.UNITS, function(unit, value) {
						if(milliseconds >= value) {
							humanize = Math.floor(milliseconds / value) + unit + '前';
							return false;
						}
						return true;
					});
					return humanize || '刚刚';
				},
				format: function(dateStr) {
					var date = this.parse(dateStr)
					var diff = Date.now() - date.getTime();
					if(diff < this.UNITS['天']) {
						return this.humanize(diff);
					}

					var _format = function(number) {
						return(number < 10 ? ('0' + number) : number);
					};
					return date.getFullYear() + '/' + _format(date.getMonth() + 1) + '/' + _format(date.getDay()) + '-' + _format(date.getHours()) + ':' + _format(date.getMinutes());
				},
				parse: function(str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
					var a = str.split(/[^0-9]/);
					return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
				}
			};
		        //周边游列表展示
		       function aa() {
							if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
								plus.nativeUI.toast('似乎已断开与互联网的连接', {
									verticalAlign: 'top'
								});
								return;
							}

							var data = {
								column: "id,post_id,title,author_name,cover,published_at" //需要的字段名
							}

							if(lastId) { //说明已有数据，目前处于下拉刷新，增加时间戳，触发服务端立即刷新，返回最新数据
								data.lastId = lastId;
								data.time = new Date().getTime() + "";
							}

							//请求顶部banner信息
							mui.getJSON("http://spider.dcloud.net.cn/api/banner/36kr", data, function(rsp) {
								news.banner = {
									guid: rsp.post_id,
									title: rsp.title,
									cover: rsp.cover,
									author: rsp.author_name,
									time: dateUtils.format(rsp.published_at)
								};
							});

							//请求列表信息流
							mui.getJSON("http://spider.dcloud.net.cn/api/news", data, function(rsp) {
								mui('#list').pullRefresh().endPulldown();
								if(rsp && rsp.length > 0) {
									lastId = rsp[0].id; //保存最新消息的id，方便下拉刷新时使用
									news.items = news.items.concat(convert(rsp));
								}
							});
						}
		
		       //发现酒店的列表展示
		       function bb(){
		       	alert("test");
		       	
		      	if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
								plus.nativeUI.toast('似乎已断开与互联网的连接', {
									verticalAlign: 'top'
								});
								return;
							}

							var data = {
								column: "id,post_id,title,author_name,cover,published_at" //需要的字段名
							}

							if(lastId) { //说明已有数据，目前处于下拉刷新，增加时间戳，触发服务端立即刷新，返回最新数据
								data.lastId = lastId;
								data.time = new Date().getTime() + "";
							}

							//请求顶部banner信息
							mui.getJSON("http://spider.dcloud.net.cn/api/banner/36kr", data, function(rsp) {
								news.banner = {
									guid: rsp.post_id,
									title: rsp.title,
									cover: rsp.cover,
									author: rsp.author_name,
									time: dateUtils.format(rsp.published_at)
								};
							});

							//请求列表信息流
							mui.getJSON("http://spider.dcloud.net.cn/api/news", data, function(rsp) {
								mui('#list').pullRefresh().endPulldown();
								if(rsp && rsp.length > 0) {
									lastId = rsp[0].id; //保存最新消息的id，方便下拉刷新时使用
									news.items = news.items.concat(convert(rsp));
								}
							});
		       }
		</script>
	</body>

</html>